<template>
  <div class="css-main-view">
    <el-row :gutter="20">
      <el-col :span="4" v-for="(item,index) in list" :key="index">
        <div class="css-card css-hover">
          <p class="static-card">{{ item.title }}</p>
          <p class="static-card title-p">
            <span class="count">{{ item.apicount }}个</span>
          </p>
        </div>
      </el-col>

      <!--图表-->
      <el-col>
        <div class="module-card execute-wrap">
          <div class="left">
            <div class="execute-card" v-for="(item, index) in executeList" :key="index">
              <div class="static-card">{{ item.apicount }}</div>
            </div>
          </div>
          <div class="right execute-table-wrap">
            <div class="title">
              <h2>过去7天执行集失败用例TOP10</h2>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Project_diasbod",
  data() {
    return {
      list: [
        {'apicount': 444, title: '接口总数'},
        {'apicount': 22, title: '用例总数'},
        {'apicount': 44334, title: '场景总数'},
        {'apicount': 55, title: '执行总数'},
        {'apicount': 123, title: '定时任务数'},
        {'apicount': 98, title: 'MOCK数'},
      ],
      executeList: [
        {'apicount': 34, title: '接口总数'},
        {'apicount': 44455, title: '接口总数'},
        {'apicount': 66, title: '接口总数'},
      ]
    }
  }
}
</script>

<style scoped>
.css-main-view {
  background: #ffffff;
  padding: 12px 12px;
  height: calc(100vh - 140px);
}

.css-card {
  border: 1px solid #e5e9f2;
  border-radius: 4px;
  min-width: 150px;
  height: 100px;
  padding: 10px 0 20px 20px;
  cursor: pointer;
}

.static-card {
  font-size: 14px;
  color: #818899;
  line-height: 14px;
  margin-bottom: 8px;
}

.static-card .title-p {
  margin-bottom: 5px;
}

.count {
  font-size: 22px;
  color: #357ff1;
  line-height: 26px;
}

.css-hover:hover {
  border: 1px solid #357ff1;
}

.module-card {
  margin: 20px 0;
  background: #fff;
  border: 1px solid #e5e9f2;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .03);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .03);
  border-radius: 4px;
}

.execute-wrap {
  position: relative;
  height: 339px;
  width: 100%;
}

.execute-wrap .left {
  position: absolute;
  top: 0;
  left: 0;
  width: 265px;
  height: 100%;
  border-right: 1px solid #edeef0
}

.execute-wrap .right {
  position: absolute;
  top: 0;
  left: 265px;
  right: 0;
  height: 100%;
}

.execute-wrap .execute-card {
  display: block;
  height: 113px;
  margin: 0 -1px -1px 0;
  border-bottom: 1px solid #edeef0;
}

.execute-table-wrap .title {
  padding: 22px 25px;
  height: 32px;
  line-height: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.execute-table-wrap .title h2 {
  display: inline-block;
  font-size: 16px;
  color: rgba(19, 29, 55, .85);
  position: relative;
}
</style>

